<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="../statics/css/amazeui.min.css">
  <link rel="stylesheet" href="../statics/css/animate.css">
  <link rel="stylesheet" href="../statics/css/layout.css">
  <link rel="stylesheet" href="../statics/css/pages.css">
  <link rel="stylesheet" href="../statics/css/jq-pages.css">
  <link rel="stylesheet" href="../statics/iconfont/iconfont.css">
  <link rel="stylesheet" href="../statics/css/demo.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="../statics/css/venobox/venobox.css" type="text/css" media="screen" />
  <script src="../statics/js/jquery-1.11.0.min.js"></script>
  <script src="../statics/js/amazeui.min.js"></script>
  <script src="../statics/js/amazeui.lazyload.min.js"></script>
  <script src="../statics/js/jq-pages.js"></script>
  <script type="text/javascript" src="../statics/js/venobox/venobox.min.js"></script>
</head>

<body>
  <header class="rb-topbar">
    <div class="amz-container">
      <h1 class="am-topbar-brand rb-brand ">
        <a href="/dsf-web" class="rb-logo"><img src="../statics/images/logo.png" alt="/"></a>
      </h1>
      <!--menus icon-->
      <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-show-sm-only"
        data-am-collapse="{target: '#doc-topbar-collapse-1'}">
        <span class="am-sr-only">
          导航切换
        </span>
        <span class="iconfont icon-bars">
        </span>
      </button>
      <!--#include file="/public/html/menu.html"-->
    </div>
  </header>
  <style>
    .am-slider-i2 .am-slider-desc {
      top: 45%;
    }

    .message-icon {
      position: fixed;
      left: 10px;
      bottom: 40px;
      width: 50px;
      height: 50px;
      z-index: 99;
      display: none;
    }

    .message-icon img {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }

    .message {
      width: 240px;
      position: fixed;
      left: 10px;
      bottom: 40px;
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      overflow: hidden;
      background: #fff;
      display: block;
      z-index: 100;
    }

    .message .title {
      height: 46px;
      line-height: 46px;
      background: #4e6ef2;
      padding-left: 10px;
      font-size: 14px;
      color: #fff;
    }

    .message .title span {
      margin-left: 6px;
      font-size: 12px;
    }

    .message .title .minue-icon {
      height: 100%;
      display: block;
      float: right;
      padding-right: 10px;
      cursor: pointer;
    }

    .message .message-box {
      padding: 10px;
    }

    .message .message-content {
      width: 100%;

    }

    .message .message-content textarea {
      display: block;
      width: 100%;
      outline: none;
      border: none;
      padding: 0 10px;
      box-sizing: border-box;
      color: #000;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      overflow: hidden;
    }

    .message-placeholder::placeholder {
      font-size: 12px;
      color: #999;
      font-family: '黑体';
      font-weight: normal;
    }

    .message .message-tel {
      height: 40px;
      margin-top: 10px;
      position: relative;
      border: 1px solid #ddd;
      border-radius: 4px;
      overflow: hidden;
    }

    .message .message-tel i {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px;
      font-size: 14px;
      color: #999;
    }

    .message .message-tel input {
      border: none;
      outline: none;
      display: block;
      width: 100%;
      height: 100%;
      color: #000;
      font-size: 14px;
      padding: 0 10px;
      box-sizing: border-box;
      padding-left: 36px;
    }

    .message .submit {
      width: 100%;
      height: 40px;
      background: #fff;
      border-radius: 5px;
      margin: 10px 0 20px;
      overflow: hidden;
    }

    .message .submit input {
      display: block;
      width: 100%;
      height: 100%;
      background: transparent;
      font-size: 14px;
      transition: all .4s;
      background: #4e6ef2;
      color: #fff;
    }
    @media (max-width: 768px) {
      .recruit-banner {
        height: 400px;
      }
      .recruit-banner .am-slides {
        height: 100%;
      }
      .recruit-banner .am-slides .am-slider-images {
        min-height: auto !important;
        height: 100% !important;
      }
    }
  </style>
  <div data-am-widget="slider" class="am-slider am-slider-i2 recruit-banner" data-am-flexslider="{controlNav:false}">
    <div class="am-slides">
      <div class="am-slider-images" style="background-image: url(../statics/images/join-us/banner.jpg);">
        <div class="am-container am-slider-desc">
          <div class="am-slider-content">
            <h3 class="up-en am-slider-title am-animation-slide-left"
              data-am-scrollspy="{animation: 'slide-left', delay: 100}" style="color:#fff;">Recruitment Information</h3>
            <h3 data-am-scrollspy="{animation:'slide-right', delay: 500}" class="up-cn am-animation-slide-right" style="color:#fff;">招聘信息
            </h3>
            <i data-am-scrollspy="{animation:'slide-bottom', delay: 700}" class="am-animation-slide-bottom" style="background:#fff;"></i>
            <div data-am-scrollspy="{animation:'slide-left', delay: 1200}" class="rb-bantxt am-animation-slide-right" style="color:#fff;">并联机器人的特点呈现为无累积误差，精度较高；驱动装置可置于定平台上或接近定平台的位置，这样运动部分重量轻，速度高，动态响应好。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="amz-container am-animation-slide-left" data-am-scrollspy="{animation: 'slide-left', delay: 100}">
    <div class="amz-container rb-hg110 recruit-hg110"></div>
    <div class="am-container-1 join-bg join-bg-1">
      <div class="rb-join">
        <div class="rb-joinlist">
          <h3 class="recruit-h3"><a href="/views/recruit-detail.html">高级销售经理】</a></h3>
        </div>
        <div class="rb-joinlist">
          <h3 class="recruit-h3"><a href="/views/recruit-detail.html">【算法工程师】</a></h3>
        </div>
        <div class="rb-joinlist">
          <h3 class="recruit-h3"><a href="/views/recruit-detail.html">高级销售经理】</a></h3>
        </div>
        <div class="rb-joinlist">
          <h3 class="recruit-h3"><a href="/views/recruit-detail.html">【算法工程师】</a></h3>
        </div>
        <div class="rb-joinlist">
          <h3 class="recruit-h3"><a href="/views/recruit-detail.html">【算法工程师】</a></h3>
        </div>
        <div class="rb-joinlist">
          <h3 class="recruit-h3"><a href="/views/recruit-detail.html">高级销售经理】</a></h3>
        </div>
        <div class="rb-joinlist">
          <h3 class="recruit-h3"><a href="/views/recruit-detail.html">【算法工程师】</a></h3>
        </div>
      </div>
    </div>
  </div>
  <div style="text-align: center;margin:50px auto 0;">
    <div id="pager" class="pager clearfix">
    </div>
  </div>
  <div class="message-icon">
    <img src="../statics/images/about-us/message.png" alt="">
  </div>
  <div class="message am-animation-slide-left" data-am-scrollspy="{animation: 'slide-left', delay: 300}">
    <div class="title">留言板 <span>Message Board </span><i class="iconfont icon-jianshao minue-icon"></i></div>
    <div class="message-box">
      <div class="message-content">
        <textarea rows="2" cols="20" placeholder="留言内容 / Message Contents" class="message-placeholder"></textarea>
      </div>
      <div class="message-tel">
        <input type="input" placeholder="姓名 / Name" class="message-placeholder" />
        <i class="iconfont icon-zhenshixingming"></i>
      </div>
      <div class="message-tel">
        <input type="number" placeholder="联系电话 / Tel" class="message-placeholder" />
        <i class="iconfont icon-dianhua"></i>
      </div>
      <div class="message-tel">
        <input type="input" placeholder="邮箱 / Email" class="message-placeholder" />
        <i class="iconfont icon-youxiang1"></i>
      </div>
      <div class="message-tel">
        <input type="input" placeholder="地址 / Address" class="message-placeholder" />
        <i class="iconfont icon-dizhi1"></i>
      </div>
      <div class="submit">
        <input type="submit" value="发送/Send" />
      </div>
    </div>
  </div>
  <!--#include file="/public/html/footer.html"-->
  <script src="../statics/js/canvas.js"></script>
  <script>
    var _height = $('.am-tabs-nav').css('height')
    $('.am-tabs-bd').css('height', _height)
    $("#pager").zPager({
      totalData: 50,
      htmlBox: $('#wraper'),
      btnShow: true,
      ajaxSetData: false
    });
    $('.message-icon').on('click',function() {
      $('.message').css('display','block')
      $(this).css('display','none')
    })
    $('.minue-icon').on('click',function() {
      $('.message').css('display','none')
      $('.message-icon').css('display','block')
    })
    function currentPage(currentPage) {
      /*
        触发页码数位置： Page/js/jquery.z-pager.js 64行
      */
      console.log("当前页码数：" + currentPage);
    }
  </script>
</body>

</html>